<!-- 结算 -->
<template>
  <div>
    <div style="width: 1100px; margin-left: 180px; padding-top: 20px">
      <!-- 图标 -->
      <div style="">
        <img
          style="width: 140px; height: 50px"
          src="@/static/logo.png"
          alt=""
        />
      </div>

      <!-- 订单号 -->
      <div style="font-size: 12px;padding-left: 30px;">
        <div style="margin-top: 50px;  display: flex">
          <div style="display: flex; align-items: center; gap: 10px">
            <img
              style="width: 16px; height: 16px"
              src="../../static/圆圈对勾.png"
              alt=""
            />
            <strong
              >订单提交成功,订单号:1710502384884444422,请及时付款，订单将在时间
              <span style="color: red">29分30秒</span>
              后取消。
            </strong>
          </div>

          <div style="margin-left: auto">
            应付金额：<span style="color: red">￥1360.00</span>元
          </div>
        </div>

        <!-- 支付方式 -->

        <div style="border: 0.5px solid #ccc;height: 40px;line-height: 40px;margin-top: 20px;margin-left: 50px;">
          <el-radio-group v-model="radio"  style="padding-left: 10px;">
            <el-radio size="mini" :label="1">支付宝支付</el-radio>
            <el-radio :label="2">微信支付</el-radio>
            <el-radio :label="3">余额支付</el-radio>
          </el-radio-group>
        </div>

       <!-- 输入密码 -->
       <div style="border: 0.5px solid #ccc;height: 40px;line-height: 40px;margin-top: 20px;margin-left: 50px;">
           <div style="display: flex;margin-left: 10px;">
            <span>请输入支付密码:</span>
             <div style="width: 50px;height: 10px;padding-left: 10px;">
              <el-input  :show-password="true" type="text" v-model="password"></el-input>
            </div>
            <div style="margin-left: 70px;margin-top: 2px;"><button style="height: 20px;"><div style="margin-top: -3px">确认支付</div></button></div>
           </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: 3,
      password: '123'
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-input__inner {
  height: 20px;
  width: 100px;

}

/* 调整密码输入框图标位置 */

::v-deep  .el-input__suffix-inner {
  display: flex !important;
  justify-content: flex-end !important;
}

::v-deep .el-icon-view {
  position: relative !important;
  left: 59px !important;
  line-height: 45px;
}
</style>
